<template>
    <div class="market-wrapper">
        <IHeader class="header" back="true" title="选择类型"></IHeader>
        <scroller style="margin-top: 88px;">
            <div class="tab-wrapper">
                <image class="tab-bg" :src="imgPath(type === 0 ? 'platform_bg.png' : 'master_bg.png')"></image>
                <div class="tab-list">
                    <div class="tab-item" v-for="(item, index) in tabList[type]" :key="index" @click="jumpTo(item.path)">
                        <image class="tab-icon" :src="imgPath(item.icon)"></image>
                        <text class="tab-word">{{item.name}}</text>
                    </div>
                </div>
            </div>
            <div class="bar"></div>
            <div class="description-wrapper">
                <text class="title">{{type === 0 ? '平台求购' : '大师工坊'}}</text>
                <text class="description" v-if="type === 0">&nbsp;&nbsp;&nbsp;&nbsp;泳衣库平台求购为广大用户提供布料、辅料、工厂、订单和高人需求展示，实现泳装产业各生产要素在平台实现协同，提升效率，让找料、找工厂、找订单和找人才不再困难，轻松实现。</text>
                <text class="description" v-if="type === 1">&nbsp;&nbsp;&nbsp;&nbsp;泳衣库大师工坊汇聚行业优秀设计师、打版师、缝纫工，为您提供从设计、打版、找料和做样一站式泳衣开发服务；大师工坊的各类高人为您提供在产品开发过程中的技术支持和服务，同时为广大客户提供专业的数据服务。</text>
                <div class="desc-image-wrapper">
                    <image class="desc-image" :src="imgPath(type === 0 ? 'desc_image_platform.png' : 'desc_image_master.png')"></image>
                </div>
            </div>
        </scroller>
    </div>
</template>

<script>
import IHeader from '@/components/header'
const modal = weex.requireModule('modal')
const storage = weex.requireModule('storage')

export default {
  name: 'masterplatform',
  data () {
    return {
      userId: '', // userId
      type: 0, // 0-平台求购 1-大师工坊
      tabList: [
        [
          {
            name: '找布料',
            icon: 'platform_icon_1.png',
            path: '/market/material'
          },
          {
            name: '找辅料',
            icon: 'platform_icon_2.png',
            path: '/market/accessories'
          },
          {
            name: '找工厂',
            icon: 'platform_icon_3.png',
            path: '/market/factory'
          },
          {
            name: '找订单',
            icon: 'platform_icon_4.png',
            path: '/market/order'
          },
          {
            name: '找高人',
            icon: 'platform_icon_5.png',
            path: '/market/master'
          }
        ],
        [
          {
            name: '设计',
            icon: 'platform_icon_6.png',
            path: '/market/design'
          },
          {
            name: '打版',
            icon: 'platform_icon_7.png',
            path: '/market/edition'
          },
          {
            name: '做样',
            icon: 'platform_icon_8.png',
            path: '/market/proof'
          },
          {
            name: '高人',
            icon: 'platform_icon_9.png',
            path: '/market/platformMaster'
          },
          {
            name: '数据',
            icon: 'platform_icon_10.png',
            path: ''
          }
        ]
      ]
    }
  },
  created () {
    const that = this
    that.type = that.$route.query.type
    storage.getItem('userId', event => {
      if (event.result === 'success') {
        that.userId = event.data
      }
    })
    // that.imageStyle.height = weex.config.env.deviceHeight / weex.config.env.deviceWidth * 750 + 'px'
  },
  methods: {
    jumpTo (path) { // 跳转
      const that = this
      if (that.userId) {
        if (!path) {
          modal.toast({
            message: '该功能暂未开放',
            duration: 0.8
          })
        } else {
          that.$router.push(path)
        }
      } else {
        modal.toast({
          message: '用户未登录',
          duration: 0.8
        })
        that.$router.push('/login')
      }
    }
  },
  components: {
    IHeader
  }
}
</script>

<style scoped>
    .tab-wrapper {
        height: 300px;
    }
    .tab-bg {
        width: 750px;
        height: 300px;
    }
    .tab-list {
        position: absolute;
        top: 76px;
        left: 48px;
        right: 48px;
        flex-direction: row;
        justify-content: space-between;
    }
    .tab-item {
        width: 100px;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .tab-icon {
        width: 100px;
        height: 100px;
    }
    .tab-word {
        width: 100px;
        margin-top: 24px;
        font-size: 28px;
        font-family: bold;
        color: #fff;
        text-align: center;
    }
    .bar {
        height: 10px;
        background-color: #f5f5f5;
    }
    .title {
        margin-top: 60px;
        margin-bottom: 50px;
        font-size: 40px;
        font-family: bold;
        text-align: center;
        color: rgb(16, 50, 108)
    }
    .description {
        margin-bottom: 50px;
        padding-left: 24px;
        padding-right: 24px;
        color: rgb(134, 134, 134);
        font-size: 24px;
        line-height: 38px;
    }
    .desc-image-wrapper {
        margin-top: 50px;
        margin-bottom: 100px;
        padding-left: 24px;
        padding-right: 24px;
    }
    .desc-image {
        width: 702px;
        height: 490px;
    }
</style>
